<template>
    <div class="maindiv" >

  <el-row :gutter="20"  type="flex" justify="center">
    <el-card class="main-card">
    <!-- <el-col :span="6"><el-card>目录</el-card></el-col> -->
    <el-col>
 <el-button @click="resetDateFilter">清除日期过滤器</el-button>
  <el-button @click="clearFilter">清除所有过滤器</el-button>
  <el-table
    ref="filterTable"
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="加入日期"
      sortable
      width="180"
      column-key="date"
      :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
      :filter-method="filterHandler"
    >
    </el-table-column>
    <el-table-column
      prop="name"
      label="单位名称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      :formatter="formatter">
    </el-table-column>
    <el-table-column
      prop="tag"
      label="标签"
      width="100"
      :filters="[{ text: '飞行营地', value: '飞行营地' }, { text: '协会', value: '协会' }]"
      :filter-method="filterTag"
      filter-placement="bottom-end">
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.tag === '飞行营地' ? 'primary' : 'success'"
          disable-transitions>{{scope.row.tag}}</el-tag>
      </template>
    </el-table-column>
  </el-table>

    </el-col>
    </el-card>
  </el-row>

<el-drawer
  title="此处是新闻标题"
  :visible.sync="drawer"
  :direction="direction"
  :before-close="handleClose">
  <span>新闻内容</span>
</el-drawer>
    </div>
</template>
<style lang="less" scoped>
.maindiv{
height: 100%;
width: 100%;
background-color: #efeeee;
}
.el-header{
width: 100%;
height: 200px;
}
.el-aside{
width: 100%;
height: 200px;


}
.el-card{
border-radius: 30px

}

.headcard{

    height: 100px;
}
.asidecard{
height: 100%;

}

.main-card{
height: 100%;
width: 800px;

}
</style><script>
  export default {
    data() {
      return {
        drawer: false,
        direction: 'rtl',
         tableData: [{
          date: '2016-05-02',
          name: '郑州市第一中学',
          address: '郑州市人民路1号',
          tag: '飞行营地'
        }, {
          date: '2016-05-04',
          name: '鹤壁航空协会',
          address: '鹤壁市人民路1号',
          tag: '飞行营地'
        }, {
          date: '2016-05-01',
          name: '洛阳第一中学',
          address: '洛阳市人民路1号',
          tag: '飞行营地'
        }, ]
      };
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
       handleClick(row) {
        console.log(row);
      },  resetDateFilter() {
        this.$refs.filterTable.clearFilter('date');
      },
      clearFilter() {
        this.$refs.filterTable.clearFilter();
      },
      formatter(row, column) {
        return row.address;
      },
      filterTag(value, row) {
        return row.tag === value;
      },
      filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      }
    }
  };
</script>